<!--流程表单小组件-->
<template>
  <div class="bottomDescribe">
    <div class="topContent">
      <div class="leftTitle">
        操作
      </div>
      <div class="rightContent">
        <a-radio-group v-model="radioValue" @change="onChange">
          <a-radio v-for="(item, index) in radioData" :key="index" :value="item.routing" :disabled="item.disabled">
            {{ item.lable }}
          </a-radio>
        </a-radio-group>
      </div>
    </div>
    <div class="topContent" v-if="radioValue==='TRANSFER'">
      <div class="leftTitle">
        转办人员
      </div>
      <div class="rightContent">
        <a-input v-model="inputPeople" :disabled="inputDisable" style="width: 12vw"/>
        <a-button type="primary" size="small" style="margin-left: 10px;" @click="showModalPeople">添加</a-button>
      </div>
    </div>
    <div class="botContent">
      <div class="leftTitle">
        处理意见
      </div>
      <div class="rightContent">
        <div class="selectBox">
          <div class="selectTitle">常用意见：</div>
          <div class="selectConetnt">
            <a-select v-model="selectDefaultValue" style="width: 12vw" @change="handleChange">
              <a-select-option v-for="(item, index) in selectData" :key="index" :value="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </div>
          <div class="custom">
            <a-button @click="showModal">自定义</a-button>
            <a-modal v-model="modalVisible" title="自定义处理意见" centered @cancel="handleOk" v-if="modalVisible">
              <div style="margin-bottom: 1.5vh">自定义常用处理意见（每行一个）</div>
              <a-textarea
                style="width: 50vw"
                v-model="modalAreaValue"
                placeholder="请输入"
                :auto-size="{ minRows: 8, maxRows: 8 }"
              />
              <template slot="footer">
                <a-row>
                  <a-col :span="14" class="sync-content"
                         style="font-size: 14px;color: #386BD7;display: flex;justify-content: flex-start;align-items: center;padding: 8px">
                  </a-col>
                  <a-col :span="10" style="padding-right: 18px">
                    <a-button @click="handleOk">取消</a-button>
                    <a-button type="primary" @click="onSubmit">确定</a-button>
                  </a-col>
                </a-row>
              </template>
            </a-modal>
          </div>
        </div>
        <div class="textArae">
          <a-textarea
            style="width: 50vw"
            v-model="textAreaValueInput"
            placeholder="请输入"
            :auto-size="{ minRows: 3, maxRows: 3 }"
          />
          <div class="submit" v-if="submitBtn">
            <a-button v-if="saveBtn" @click="saveItem" style="margin-right: 10px;">保存</a-button>
            <a-button type="primary" v-if="submitBtn" @click="onCompleteWorkItem">提交</a-button>
          </div>
        </div>
      </div>
    </div>
    <common-modal :modal-visible="modalVisiblePeople" modal-title="关联转办人员"
                  @handleOk="handleOkPeople"
                  @handCancel="handCancel"
                  :selectType="'radio'"
                  :itemArr="itemArr"></common-modal>
  </div>
</template>
<script>
import {getCustomizeOpinions, putCustomizeOpinions, userinfo} from "@api/middleGround";
import commonModal from "@/components/common/commonModal.vue";//设置转办人
import _ from "lodash"
import {getManagerMiddle, searchUserIdMiddle, serveManager} from "@api/singleProject";
import {Message} from "ant-design-vue";
export default {
  name: 'bottomDescribe',
  data() {
    return {
      radioValue: null,
      modalVisible: false,
      modalAreaValue: '',
      selectDefaultValue: '请选择',
      selectData: [],//下拉框数
      // textAreaValueInput:this.textAreaValue
      textAreaValueInput: '',
      inputDisable: true,//文本框禁用
      modalVisiblePeople: false, // 设置转办人弹框显示隐藏
      itemArr: [],
      inputPeople:'',//转办人文本框--中文名
      inputPeopleId:'',//转办人文本框--userID
    }
  },
  components: {
    commonModal
  },
  props: {
    radioData: { // 单选框数据
      type: Array,
      default: () => {
        return []
      }
    },
    /*textAreaValue: { //文本框数据
      type: String
    },*/
    submitBtn: {
      type: Boolean,
      default: false,
    } ,
    saveBtn: {
      type: Boolean,
      default: false,
    }
  },
  watch:{ 
    //如果传进来的radioData有值的话，就默认赋值，给出数组的第一个
      radioData(newVal,oldVal){
          if(newVal){
            const idx = newVal.findIndex(function(item) {
              return !item.disabled
            })
            this.radioValue = newVal[idx].routing
            this.textAreaValueInput = newVal[idx].lable
            this.$emit('defaultRadio',newVal[idx].routing)
          }
      }
  },
 
  mounted() { 
    this.getCustomizeOpinionsData()
  },
  methods: {
    onChange(e) { // 单选框
      this.$emit('radioChange', e.target.value)
    //  this.textAreaValueInput = e.target.value==='TRANSFER'?'转办':e.target.value
      if( e.target.value == '1'){
        this.textAreaValueInput = '通过'
      }else if(e.target.value == '2'){
        this.textAreaValueInput = '驳回'
      }else if(e.target.value == 'TRANSFER'){
        this.textAreaValueInput = '转办'
      }else{
        this.textAreaValueInput = e.target.value ? e.target.value : "提交"
      }
      // console.log('radio', e.target.value);
    },
    saveItem() {
      this.$emit("saveItem")
    },
    handleChange(value) { // 点击下拉框
      // this.$emit('selectChange', value)
      this.textAreaValueInput = value
    },
    showModal() {
      this.modalVisible = true;
    },
    handleOk(e) {
      this.modalVisible = false;
      // this.$emit('modelValue', this.modalAreaValue) // 点击弹框
    },
    onSubmit() {
      if (this.modalAreaValue == '') {
        this.$message.error('请输入意见！')
      } else {
        let parm =
          {
            "opinion": _.replace(this.modalAreaValue, /\r\n|\n|\r/g, ','),
            "userId": userinfo.loginName
          }
        putCustomizeOpinions(parm).then(res => {
          if (res.status === 200 && res.data) {
            this.modalVisible = false;
            this.getCustomizeOpinionsData()//刷新自定义意见
            this.$message.success('设置自定义意见成功！')
          } else {
            this.$message.error('设置自定义意见失败！')
          }
        })
      }
    },
    //获取自定义审核意见
    getCustomizeOpinionsData() {
      let parm = {
        "userId": userinfo.loginName
      }
      getCustomizeOpinions(parm).then(res => {
        if (res.status === 200 && res.data) {
          if (res.data.opinion.length > 0) {
            this.selectData = res.data.opinion.split(',')
            // console.log(this.selectData.toString())
            this.modalAreaValue = _.replace(this.selectData.toString(), /,/g, '\r\n')
          } else {
            this.selectData = []
            this.modalAreaValue = ''
          }
        } else {
          this.$message.error('获取自定义意见失败！')
        }
      })
    },
    //完成提交
    onCompleteWorkItem() {
      this.$emit('onCompleteWorkItem')
    },
    // 添加转办人
    handleOkPeople(val) {
      // this.inputValue[this.modalId] = val.name
      // this.requireObj[this.modalId] = val.userId;
      this.inputPeople =val.name
      this.inputPeopleId =val.userId
      let params = {
        staffList: val.userId,
        userId: this.userId
      }
      serveManager(params).then(res => {
        if (res.result) {
          Message.success('添加成功')
        }
      })
      this.modalVisiblePeople = false;
    },
    handCancel() {
      this.modalVisiblePeople = false;
    },
    // 转办人
    getManager() {
      let _this = this
      getManagerMiddle().then(res => {
        if (res.data.staffList) {
          const arr = res.data.staffList.split(',')
          const newStaffList = arr.filter((item, index) => {
            return arr.indexOf(item, 0) === index
          })
          let newArr = []
          let newList = []
          if (newStaffList.length > 10) {
            newList = newStaffList.slice(-10)
          } else {
            newList = newStaffList
          }
          let params = {
            match: true,
            userIds: newList,
          }
          searchUserIdMiddle(params).then(res1 => {
            res1.data.map(item => {
              item.checked = false
            })
            newArr.push(res1.data)
             _this.itemArr = newArr.flat()
          })
        }
      })
    },
    //显示设置转办人的弹框
    showModalPeople(){
      this.getManager()
      this.modalVisiblePeople = true
    },
  }
}
</script>
<style lang="less" scoped>
.bottomDescribe {
  border: 1px solid #d9d9d9;
  .topContent {
    display: flex;
    border-bottom: 1px solid #d9d9d9;
    .leftTitle {
      width: 8vw;
      padding: 1vh 0px 1vh 2.5vw;
      background-color: #F6F6F6;
      border-right: 1px solid #d9d9d9;
    }
    .rightContent {
      flex: 1;
      padding: 1vh 0px 1vh 1.5vw;
      /deep/ .ant-radio-group {
        .ant-radio-wrapper {
          margin-right: 1vw;
          span.ant-radio + * {
            padding-right: 8px;
            padding-left: 4px;
          }
        }
      }
    }
  }
  .botContent {
    display: flex;
    .leftTitle {
      width: 8vw;
      padding: 1vh 0px 1vh 2.5vw;
      background-color: #F6F6F6;
      border-right: 1px solid #d9d9d9;
    }
    .rightContent {
      flex: 1;
      padding-left: 1.5vw;
      padding-bottom: 1.5vw;
      .selectBox {
        display: flex;
        align-items: center;
        margin-top: 1.5vh;
        .selectConetnt, .custom {
          margin-right: 1vw;
        }
      }
      .textArae {
        margin-top: 1.5vh;
        .submit {
          margin-top: 10px;
          width: 170px;
          color: #fff;
          //background-color: #386bd7;
          padding: 0px;
          border-radius: 4px;
        }
      }
      .botBtn {
        margin-top: 1.5vh;
      }
    }
  }
}
</style>